.header-container { width: 100%; position: fixed; left: 0; top: 0; z-index: 10; background: #FFFFFF; font-size: 16px; }
.header-container .cell { vertical-align: middle; height: 100px; line-height: 100px; float: left; }
.header-container .logo-wrap { padding: 0 2em; }
.header-container .logo-wrap .logo { height: 45px; vertical-align: middle; width: auto; }
.header-container .nav-wrap { float: right; }
.header-container .item-first { display: inline-block; position: relative; }
.header-container .item-first::after { content: ""; position: absolute; z-index: 10; background: #00934C; left: 0; bottom: 0; width: 100%; height: 0px; transition: all 0.4s; }
.header-container .item-first .link-first { display: block; padding: 0 1em; color: #666666; }
.header-container .item-first .link-first.pc { display: block; }
.header-container .item-first .link-first.mo { display: none; }
.header-container .nav-list-second { line-height: 40px; background: #F2F3F4; position: absolute; color: #666666; top: 100%; left: 0; z-index: 10; display: none; }
.header-container .link-second { padding: 0 1em; display: block; }
.header-container .link-second:hover { background: #00934C; color: #FFFFFF; }
.header-container .item-first.active::after,
.header-container .item-first:hover::after { height: 6px; }
.header-container .item-first:hover .nav-list-second { display: block; }
.header-container .link-wrap { color: #FFFFFF; padding: 0 1.8em; float: right; }
.header-container .link-wrap .link { padding: 0.8em 1.2em; border-radius: 1.8em; margin: 0 1em; }
.header-container .link-wrap .link:hover { color: #FFFFFF; opacity: 0.8; }
.header-container .search-wrap { float: right; }
.header-container .search-icon { color: #696969; width: 100px; text-align: center; font-size: 1.5em; border-left: 1px solid #E0E0E0; cursor: pointer; }
.header-container .search-icon:hover { color: #00934C; }
.header-container .menu-wrap { float: right; display: none; }
.header-container .menu-icon { line-height: 80px; width: 50px; text-align: center; border-left: 1px solid #E0E0E0; font-size: 1.6em; }
.header-container .menu-icon:active { color: #00934C; }
.header-container .oa-icon { line-height: 80px; width: 50px; text-align: center; border-left: 1px solid #E0E0E0; font-size: 1.8em; display: none; }
.header-container .oa-icon:active { color: #00934C; }
.search-container { position: absolute; width: 100%; height: 100%; top: 100%; left: 0; z-index: -1;; background: #FFFFFF; border-top: 1px solid rgba(0,0,0,0.12); transition: all 0.4s; height: 0; overflow: hidden; opacity: 0; }
.search-container.show { height: 100%; opacity: 1; }
.search-container .search-wrapper { max-width: 800px; margin: 0 auto; height: 100%; position: relative; width: 100%; }
.search-container .search-wrapper .close { position: absolute; color: #666666; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; }
.search-container .search-wrapper .search { position: absolute; color: #666666; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; }
.search-container .search-wrapper .layui-input { height: 40%; position: absolute; width: calc(100% - 80px); top: 30%; left: 40px; z-index: 1; border: none; border-bottom: 1px solid rgba(0,0,0,0.6); border-radius: 0; }
.search-container .search-wrapper .close:hover { color: #00934C; }
.search-container .search-wrapper .search:hover { color: #00934C; }
.search-container .search-wrapper .layui-input:focus { border-color: #00934C; }
@media screen and (max-width: 1320px) {
  .header-container { font-size: 14px; }
  .header-container .logo-wrap .logo { height: 40px; }
  .search-container { padding: 0 20px; }
}
@media screen and (max-width: 1180px) {
  .header-container { font-size: 14px; }
  .header-container .logo-wrap { padding: 0 1.4em; }
  .header-container .logo-wrap .logo { height: 35px; }
  .header-container .item-first .link-first { padding: 0 0.8em; }
  .header-container .link-wrap { padding: 0 1em; }
  .header-container .link-wrap .link { padding: 0.6em 1em; border-radius: 1.8em; margin: 0 0.8em; }
}
@media screen and (max-width: 1080px) {
  .header-container { font-size: 13px; }
  .header-container .logo-wrap { padding: 0 1em; }
  .header-container .logo-wrap .logo { height: 30px; }
}
@media screen and (max-width: 950px) {
  .header-container { font-size: 12px; }
  .header-container .logo-wrap { padding: 0 0.8em; }
  .header-container .logo-wrap .logo { height: 25px; }
  .header-container .item-first .link-first { padding: 0 0.6em; }
  .header-container .link-wrap { padding: 0 0.6em; }
  .header-container .link-wrap .link { padding: 0.4em 0.6em; border-radius: 1.4em; margin: 0 0.2em; }
  .header-container .search-icon { width: 50px; }
}
@media screen and (max-width: 768px) {
  .header-container .cell { height: 80px; line-height: 80px; }
  .header-container .logo-wrap .logo { height: 20px; }
  .header-container .nav-wrap { position: fixed; width: 100%; height: calc(100vh - 80px); background: #FFFFFF; top: 80px; border-top: 1px solid #E0E0E0; z-index: 10; overflow-x: hidden; overflow-y: auto; float: none; font-size: 14px; line-height: 60px; display: none; }
  .header-container .nav-wrap.show { display: block; }
  .header-container .item-first { display: block; }
  .header-container .item-first .link-first { padding: 0 2em; pointer-events: none; }
  .header-container .item-first::after { transition: all 0s; height: 1px; background: #F0F0F0; }
  .header-container .item-first.active::after { height: 1px; }
  .header-container .item-first:hover::after { height: 0px; background: #00934C; }
  .header-container .nav-list-second { position: static; line-height: 50px; }
  .header-container .link-second { padding: 0 3em; }
  .header-container .menu-wrap { display: block; }
  .header-container .link-wrap { padding: 0; }
  .header-container .link-wrap .link { display: none; }
  .header-container .oa-icon { display: block; }
  .content-container { padding-top: 80px; }
  .header-container .item-first .link-first.pc { display: none; }
  .header-container .item-first .link-first.mo { display: block; }
  .header-container .item-first:hover .nav-list-second { display: block; }
  .header-container .item-first:active .nav-list-second { display: block; }
}
@media screen and (max-width: 320px) {
  .header-container .search-icon { width: 40px; }
  .header-container .menu-icon { width: 40px; }
  .header-container .oa-icon { width: 40px; }
}